window.onload = function () {
    var showbase = document.getElementById('showbase');
    var editpersonal = document.getElementById('editpersonal');
    var editbase = document.getElementById('editbase');
    var cancel = document.getElementById('cancel');
    var save = document.getElementById('save');

    editpersonal.onclick = function () {
        showbase.setAttribute("style", "display: none");
        editbase.setAttribute("style", "display: block");
    };

    cancel.onclick = function () {
        showbase.setAttribute("style", "display: block");
        editbase.setAttribute("style", "display: none");
    };

    save.onclick = function () {
        showbase.setAttribute("style", "display: block");
        editbase.setAttribute("style", "display: none");
    };

    var showbase1 = document.getElementById('showbase1');
    var editpersonal1 = document.getElementById('editpersonal1');
    var editbase1 = document.getElementById('editbase1');
    var cancel1 = document.getElementById('cancel1');
    var save1 = document.getElementById('save1');

    editpersonal1.onclick = function () {
        showbase1.setAttribute("style", "display: none");
        editbase1.setAttribute("style", "display: block");
    };

    cancel1.onclick = function () {
        showbase1.setAttribute("style", "display: block");
        editbase1.setAttribute("style", "display: none");
    };

    save1.onclick = function () {
        showbase1.setAttribute("style", "display: block");
        editbase1.setAttribute("style", "display: none");
    };

    var male = document.getElementById('male');
    var female = document.getElementById('female');
    var malespan = document.getElementById('malespan');
    var femalespan = document.getElementById('femalespan');

    male.onclick = function () {
        male.setAttribute("class", "el-radio is-bordered is-checked");
        male.setAttribute("aria-checked", "true");
        female.setAttribute("aria-checked", "false");
        female.setAttribute("class", "el-radio is-bordered");
        malespan.setAttribute("class", "el-radio__input is-checked");
        femalespan.setAttribute("class", "el-radio__input");
    };

    female.onclick = function () {
        female.setAttribute("class", "el-radio is-bordered is-checked");
        female.setAttribute("aria-checked", "true");
        male.setAttribute("aria-checked", "false");
        male.setAttribute("class", "el-radio is-bordered");
        femalespan.setAttribute("class", "el-radio__input is-checked");
        malespan.setAttribute("class", "el-radio__input");
    };
}
